<template>
  <div class="pro_card">
    <div class="pro_img">
      <slot name="img" :width="'50px'" :height="'50px'">
        <img
          src="../assets/head.png"
          alt=""
          :style="{ width: '50px', height: '50px' }"
        />
      </slot>
    </div>
    <div class="pro_detail">
      <div class="pro_title">
        <slot name="title">111</slot>
      </div>
      <div class="pro_desc">
        <slot name="desc">222</slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.pro_card {
  display: flex;
  justify-content: space-between;
}
.pro_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.pro_detail {
  margin: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
.pro_title {
  color: #52527b;
}
.pro_desc {
  color: #52527b;
}
</style>
